<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '设置',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="game-hall">
     <!-- 顶部返回按钮 -->
    <view class="back-button" @click="handleBack">
      <wd-icon name="arrow-left" size="50rpx"></wd-icon>
    </view>
    <!-- 顶部用户信息区域 -->
    <view class="header">
      <view class="user-info">
        <view class="user-info-left">
          <HeaderTip />
        </view>
      </view>
    </view>
<view class="setting">
    <!-- 设置内容区域 -->
    <view class="setting-content">
      <!-- 声音设置 -->
      <view class="sound-setting-section">
        <text class="section-title">声音设置</text>
        <view class="sound-setting-container">
          <view class="sound-setting-item">
            <text class="sound-label">游戏音乐</text>
            <view class="sound-control-wrapper">
              <wd-checkbox v-model="musicEnabled" shape="square" checked-color="#29e6e6" size="large" @change="onMusicChange"></wd-checkbox>
              <text class="volume-text">低</text>
              <view style="flex: 1">
                <wd-slider v-model="musicVolume" hide-label hide-min-max/>
              </view>
              <text class="volume-text">高</text>
            </view>
          </view>
          <view class="sound-setting-item">
            <text class="sound-label">游戏音效</text>
            <view class="sound-control-wrapper">
              <wd-checkbox v-model="soundEnabled" shape="square" checked-color="#29e6e6" size="large" @change="onSoundChange"></wd-checkbox>
              <text class="volume-text">低</text>
              <view style="flex: 1">
                <wd-slider v-model="soundVolume" hide-label hide-min-max/>
              </view>              
              <text class="volume-text">高</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 完善资料 -->
      <view class="setting-section">
        <text class="section-title">完善资料</text>
        <view class="avatar-upload-section">
          <view class="avatar-container">
            <image class="user-avatar" :src="avatarUrl" mode="aspectFill"></image>
            <view class="avatar-upload-btn" @tap="chooseAvatar">
              <text>+</text>
            </view>
          </view>
        </view>
        <view class="setting-item">
          <text class="setting-label">昵称</text>
          <input class="nickname-input" v-model="nickname" placeholder="请输入昵称" placeholder-style="color: #888;"></input>
        <text class="hint-text">好名字可以让你的朋友更容易记住你</text>
        </view>
      </view>
      <!-- 保存按钮 -->
    <view class="confirm-button-container">
          <view class="confirm-button" @click="saveSettings">保存</view>
        </view>
    </view>

    
    </view>
  </view>
</template>

<script setup lang="ts">
import HeaderTip from '@/components/Header/index.vue'
import { useToast } from 'wot-design-uni'
const toast = useToast()

// 声音设置状态
const musicEnabled = ref(true);
const musicVolume = ref(50);
const soundEnabled = ref(true);
const soundVolume = ref(75);

// 用户信息
const nickname = ref('');
const avatarUrl = ref('/static/images/default-avatar.png');

// 声音设置相关方法
const onMusicChange = (e: any) => {
  const enabled = e.detail.value;
  // 这里可以添加实际的音乐控制逻辑
  console.log('游戏音乐设置为:', enabled ? '开启' : '关闭');
};

const onMusicVolumeChange = (e: any) => {
  const volume = e.detail.value;
  // 这里可以添加实际的音乐音量控制逻辑
  console.log('游戏音乐音量设置为:', volume);
};

const onSoundChange = (e: any) => {
  const enabled = e.detail.value;
  // 这里可以添加实际的音效控制逻辑
  console.log('游戏音效设置为:', enabled ? '开启' : '关闭');
};

const onSoundVolumeChange = (e: any) => {
  const volume = e.detail.value;
  // 这里可以添加实际的音效音量控制逻辑
  console.log('游戏音效音量设置为:', volume);
};

// 选择头像
const chooseAvatar = () => {
  // 使用uni-app的API从相册选择图片
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album'],
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0];
      avatarUrl.value = tempFilePath;
      console.log('选择的头像路径:', tempFilePath);
      // 这里可以添加上传头像到服务器的逻辑
    },
    fail: (err) => {
      console.error('选择头像失败:', err);
      toast.error('选择头像失败')
    }
  });
};

// 保存设置
const saveSettings = () => {
  if (!nickname.value.trim()) {
    toast.warning('请输入昵称');
    return;
  }
  
  // 这里可以添加保存设置到服务器的逻辑
  console.log('保存设置:', {
    nickname: nickname.value,
    avatarUrl: avatarUrl.value,
    musicEnabled: musicEnabled.value,
    musicVolume: musicVolume.value,
    soundEnabled: soundEnabled.value,
    soundVolume: soundVolume.value
  });
  
  toast.success('设置保存成功');
};
// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.game-hall {
  min-height: 100vh;
  background-image: url('/static/images/login/loginBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #ffffff;
  padding: 20rpx;
  overflow: hidden;

  .header {
    padding: 20rpx 0;
    position: relative;
    z-index: 10;

    .user-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .top-buttons {
      display: flex;
      gap: 30rpx;

      .top-btn {
        font-size: 44rpx;
        color: #fff;
        text-shadow: 0 0 10rpx rgba(46, 131, 255, 0.6);
        &:active {
          transform: scale(0.9);
        }
      }
    }
  }
}

.setting {
  border: 1rpx solid #00ffff;
  border-radius: 16rpx;
  padding: 40rpx 20rpx;
}
.setting-content {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16rpx;
 padding: 40rpx 20rpx;
  margin-bottom: 20rpx;
}

.sound-setting-section {
  margin-bottom: 30px;
}

.sound-setting-section:last-child {
  margin-bottom: 0;
}

.section-title {
  color: #000;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  display: block;
  padding-left: 15rpx;
}

.sound-setting-container {}

.sound-setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15rpx;
  background: #303F54;
  padding: 10rpx 15rpx;
  border-radius: 10rpx;
}

.sound-setting-item:last-child {
  margin-bottom: 0;
}

.sound-label {
  color: #fff;
  font-size: 23rpx;
  min-width: 120rpx;
}

.sound-control-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-start;
  gap: 10rpx;
}

.volume-text {
  color: #fff;
  font-size: 20rpx;
  width: 40rpx;
  text-align: center;
}

slider {
  flex: 1;
  height: 10rpx;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0;
}

slider .wx-slider-thumb {
  width: 30rpx;
  height: 30rpx;
  background: linear-gradient(90deg, #36D7B7 0%, #00C6FF 100%);
  border-radius: 0;
  border: none;
}

slider .wx-slider-active {
  background: linear-gradient(90deg, #36D7B7 0%, #00C6FF 100%);
  height: 10rpx;
  border-radius: 0;
}

switch {
  transform: scale(0.8);
}

.avatar-upload-section {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.avatar-container {
  position: relative;
  width: 200rpx;
  height: 200rpx;
}

.user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #00ffff;
}


.avatar-upload-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50rpx;
  height: 50rpx;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-upload-btn text {
  color: rgba(0, 0, 0, 0.6);
  font-size: 50rpx;
  font-weight: bold;
}
.setting-item{
    padding: 20rpx;
    .setting-label{
        color: #000;
        font-weight: bold;
        font-size: 25rpx;
    }
    
    .nickname-input {
        background: #fff;
        border-radius: 8rpx;
        padding: 10rpx 15rpx;
        color: #000;
        margin: 20rpx 0;
        font-size: 25rpx;
        
    }
    
.hint-text {
  color: #000;
  font-size: 23rpx;
  display: block;
  font-weight: bold;
}
}


.confirm-button-container {
      text-align: right;
      position: relative;
      height: 180rpx;
    }
    // 确认按钮
    .confirm-button {
      width: 200rpx;
      height: 120rpx;
      background-image: url('/static/images/my/energyTrade/ok.png');
      background-size: 100% 100%;
      border: none;
      color: #000;
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
      line-height: 120rpx;
      margin-top: 50rpx;
      transition: all 0.3s ease;
      position: absolute;
      right: 0;
      &:active {
        transform: scale(0.95);
        box-shadow: 0 0 20rpx rgba(0, 240, 255, 0.4);
      }
    }
  ::v-deep .wd-slider__button-wrapper {
    top: 6rpx;
    .wd-slider__button {
     border-radius: 0!important;
     background: linear-gradient(
       to bottom left,
       #fff 0%,
       #0BFFFF 100% /* 较深的青色 */
     );
     border: 3rpx solid #187A7A;
   }
  }
  ::v-deep .wd-slider__bar {
    height: 15rpx;
    background: linear-gradient(
      to right,
      #00c8c7 0%,
      /* 中间的青色 */ #27E4E4 100% /* 较亮的青色 */
    );
  }
</style>